<!--  -->
<template>
  <div class="size-full pb-6 px-5 pointer-events-auto">
    <div class="h-[62%] w-full center-chart">
      <Center1Chart></Center1Chart>
      <div class="center-bg"></div>
    </div>
    <div class="h-[38%] pointer-events-auto z-30 relative">
      <ScreenBox :title="'政务服务自助一体机'" height="100%">
        <div class="grid grid-cols-8 size-full">
          <div class="col-span-3 size-full">
            <Center2LeftChart></Center2LeftChart>
          </div>
          <div class="col-span-5">
            <Center2RightChart></Center2RightChart>
          </div>
        </div>
      </ScreenBox>
    </div>
  </div>
</template>

<script setup lang="ts">
import ScreenBox from '../box/ScreenBox.vue'
import Center1Chart from './Inner/Center1Chart.vue'
import Center2LeftChart from './Inner/Center2LeftChart.vue'
import Center2RightChart from './Inner/Center2RightChart.vue'
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.center-chart {
  position: relative;

  .center-bg {
    pointer-events: none;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    content: '';
    background: url(@/assets/map_bg.png);
    background-size: 100% 100%;
    width: 1146px;
    height: 348px;
    z-index: 1;
  }
}
</style>
